<template>
	<view class="big-text" :class="{ 'show-tips': showTip }">
		<textarea
			ref="textArea"
			class="text"
			:value="getValue"
			:placeholder="placeholder"
			placeholder-style="color: rgba(102, 100, 93, 0.5);"
			:maxlength="maxLength"
			:style="{ height: calHeight - 40 + 'rpx', width: width + 'rpx' }"
			@input="handler"
		></textarea>
		<view :id="`view_${id}`" class="view" :style="{ minHeight: height+ 'rpx' }">{{ getValue }}</view>
		<view v-if="showTip" class="tips">
			<text class="current">{{ getCurrent }}</text>
			<text>/</text>
			<text class="total">{{ getTotal }}</text>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		value: { type: String, default: '' },
		maxLength: { type: Number, default: 120 },
		showTip: { type: Boolean, default: true },
		placeholder: { type: String, default: '' },
		height: { type: Number, default: 300 }
	},
	data() {
		const info = uni.getSystemInfoSync();
		return {
			ratio: 750 / info.windowWidth,
			calHeight: 0,
			width: 0,
			id: Math.ceil(Math.random() * 10000000)
		};
	},
	watch: {
		editable(val) {
			if (val) {
				this.calcHeight();
			}
		}
	},
	mounted() {
		const query = uni.createSelectorQuery().in(this);
		this.textView = query.select('#view_' + this.id);
		this.calcHeight();
	},
	computed: {
		getValue() {
			return this.value;
		},
		getTotal() {
			return this.maxLength;
		},
		getCurrent() {
			return this.value.length;
		}
	},
	methods: {
		calcHeight() {
			setTimeout(() => {
				this.textView
					.boundingClientRect(data => {
						this.calHeight = data.height * this.ratio;
						this.width = data.width * this.ratio;
					})
					.exec();
			}, 0);
		},
		handler(e) {
			this.calcHeight();
			this.$emit('input', e.detail.value);
			// console.log('-------------text', e.detail.value)
		}
	}
};
</script>

<style lang="less" scoped>
.big-text {
	width: 100%;
	position: relative;
	&.show-tips {
		padding-bottom: 45rpx;
	}
	.view {
		height: inherit;
		font-size: inherit;
		font-family: inherit;
		font-weight: inherit;
		line-height: inherit;
		word-break: brrak-all;
		word-wrap: break-word;
		padding: inherit;
		margin: 0;
		width: 100%;
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		visibility: hidden;
		z-index: 0;
	}
	uni-textarea {
		color: #66645D;
		height: inherit;
		display: inherit;
		font-size: inherit;
		font-family: inherit;
		font-weight: inherit;
		line-height: inherit;
		word-break: brrak-all;
		word-wrap: break-word;
		white-space: normal;
		padding: 0;
		margin: 0;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		position: relative;
	}
	.tips {
		text-align: right;
		font-size: 22rpx;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		padding-right: 8rpx;
		color: #a1a1a1;
		height: 40rpx;
		position: absolute;
		bottom: 0;
		right: 0;
		.current {
			margin-right: 4rpx;
		}
		.total {
			margin-left: 4rpx;
			font-weight: 500;
		}
	}
}
</style>
